<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animation练习</title>
        <style>
            #header{width:100%;background-color: black;display: inline-block;
                position: relative;margin:0;padding:0;
                overflow: hidden;
                text-align: center;}
            
            #header h1{
                color:red;
                animation: flag 5s linear infinite;
            }
            @keyframes flag {
                0%{transform: translateX(-50%);}
                100%{transform: translateX(50%);}
            }
            img{border-radius: 50%;width:200px;
            transition-property: width;
            transition-duration: 0.5s;
            margin:100px;
            animation: imgs 5s infinite linear;
            }
            img:hover{width:250px;animation-name: none;transform: rotate(0);}
            @keyframes imgs{
                0%{transform:rotate(0);}
                50%{transform:rotate(180deg);}
                100%{transform:rotate(360deg);}
            }
        </style>
    </head>
    <body style="padding:0;margin:0;">
        <div id="header"><h1>欢迎光临佛山职业技术学院</h1></div>
        <img src="mei.jpg">
        <img src="taohua.jpg">
        <img src="mei.jpg">
        <img src="taohua.jpg">
    </body>
</html>